@import "../mixins/mq.scss";
@import "../mixins/common.scss";

.container {
  @include container;

  .title {
    @include title;
  }

  .subtitle {
    @include subtitle;
  }

  .mask {
    position: relative;
    margin-bottom: 2.5rem;
    width: 87vw;
    text-align: left;
    overflow: hidden;
    user-select: none;

    @include md {
      width: 29rem;
    }
  }

  .block {
    position: absolute;
    height: 100%;
    background: #fff;
  }

  .txt {
    font-family: "Bowlby One SC", cursive;
    font-size: 12vw;
    opacity: 0;

    @include md {
      font-size: 4rem;
    }
  }

  .heart {
    position: absolute;
    top: 100%;
    margin-left: 1rem;
    font-size: 9vw;
    color: #f00;

    @include md {
      font-size: 3rem;
    }
  }

  .btn {
    padding: 0.5rem;
    border: 1px dashed #fff;
    font-weight: bold;
    color: #fff;
    background: none;
    cursor: pointer;

    &:not(:first-of-type) {
      margin-left: -1px;
    }

    &:hover {
      background: rgb(255 255 255 / 20%);
    }

    &:focus {
      outline: none;
    }

    @include sm {
      padding: 0.5rem 1rem;
    }
  }

  .slider {
    position: relative;
    margin-top: 1.5rem;
    width: 100%;
    background: none;
    appearance: none;

    &:focus {
      border: none;
      outline: none;
    }

    &::-moz-range-track {
      background: #fff;
    }

    &::-webkit-slider-thumb {
      appearance: none;
      width: 21px;
      height: 21px;
      background: #fff;
      cursor: pointer;
    }

    &::-moz-range-thumb {
      width: 21px;
      height: 21px;
      border: none;
      background: #fff;
      cursor: pointer;
    }

    &::after {
      content: "";
      position: absolute;
      top: 10px;
      width: 100%;
      height: 1px;
      background: #fff;
      cursor: pointer;
    }
  }
}
